Vue2 组件通信

// Parent.vue 传送
<template>
  <child :msg="msg"></child>
</template>

// Child.vue 接收
<script>
export default {
  // 写法一 用数组接收
  props: ["msg"],
  // 写法二 用对象接收，可以限定接收的数据类型、设置默认值、验证等
  props: {
    msg: {
      type: String,
      default: "这是默认数据",
    },
  },
  mounted() {
    console.log(this.msg);
  },
};
</script>

// Parent.vue
<template>
  <child :page.sync="page"></child>
</template>
<script>
export default {
  data() {
    return {
      page: 1,
    };
  },
};
</>

// Child.vue
<script>
export default {
    props:["page"],
    computed(){
        // 当我们在子组件里修改 currentPage 时，父组件的 page 也会随之改变
        currentPage {
            get(){
                return this.page
            },
            set(newVal){
                this.$emit("update:page", newVal)
            }
        }
    }
}
</script>

// Parent.vue
<template>
  <child v-model="value"></child>
</template>
<script>
export default {
  data() {
    return {
      value: 1,
    };
  },
};
</script>

// Child.vue
<template>
  <input :value="value" @input="handlerChange" />
</template>
<script>
export default {
  props: ["value"],
  // 可以修改事件名，默认为 input
  model: {
    event: "updateValue",
  },
  methods: {
    handlerChange(e) {
      this.$emit("input", e.target.value);
      // 如果有上面的重命名就是这样
      this.$emit("updateValue", e.target.value);
    },
  },
};
</script>

// Child.vue
<script>
export default {
  data() {
    return {
      name: "沐华",
    };
  },
  methods: {
    someMethod(msg) {
      console.log(msg);
    },
  },
};
</script>

// Parent.vue
<template>
  <child ref="child"></child>
</template>
<script>
export default {
  mounted() {
    const child = this.$refs.child;
    console.log(child.name); // 沐华
    child.someMethod("调用了子组件的方法");
  },
};
</script>

// Child.vue 派发
<script>
export default {
  data() {
    return { msg: "这是发给父组件的信息" };
  },
  methods: {
    handleClick() {
      this.$emit("sendMsg", this.msg);
    },
  },
};
</script>

// Parent.vue 响应
<template>
  <div>
    <child v-on:sendMsg="getChildMsg"></child>
    // 或 简写
    <child @sendMsg="getChildMsg"></child>
  </div>
</template>
<script>
export default {
  methods: {
    getChildMsg(msg) {
      console.log(msg); // 这是父组件接收到的消息;
    },
  },
};
</script>

// Parent.vue
<template>
  <child :name="name" title="1111"></child>
</template>
<script>
export default {
  data() {
    return {
      name: "沐华",
    };
  },
};
</script>

// Child.vue
<template>
  // 继续传给孙子组件
  <sun-child v-bind="$attrs"></sun-child>
</template>
<script>
export default {
  props: ["name"], // 这里可以接收，也可以不接收
  mounted() {
    // 如果props接收了name 就是 { title:1111 }，否则就是{ name:"沐华", title:1111 }
    console.log(this.$attrs);
  },
};
</script>

// 在需要向外部发送自定义事件的组件内
<template>
  <button @click="handlerClick">按钮</button>
</template>
<script>
import Bus from "./Bus.js";
export default {
  methods: {
    handlerClick() {
      // 自定义事件名 sendMsg
      Bus.$emit("sendMsg", "这是要向外部发送的数据");
    },
  },
};
</script>

// 在需要接收外部事件的组件内
<script>
import Bus from "./Bus.js";
export default {
  mounted() {
    // 监听事件的触发
    Bus.$on("sendMsg", (data) => {
      console.log("这是接收到的数据：", data);
    });
  },
  beforeDestroy() {
    // 取消监听
    Bus.$off("sendMsg");
  },
};
</script>

// Child.vue
<template>
  <div>
    <slot :user="user"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: { name: "沐华" },
    };
  },
};
</script>

// Parent.vue
<template>
  <div>
    <child v-slot="slotProps">
      {{ slotProps.user.name }}
    </child>
  </div>
</template>